<template>
	<view class="content">
		<view class="con_nav">
			<u-navbar is-back="false" border="false">
				<view class="nav_con">
					<view>{{plantTitle}}</view>
				</view>
			</u-navbar>
		</view>
		<view class="devices">
			<view class="dev_referral">
				<view class="ref_firm">
					<view class="firm_tle">
						重庆分公司501厂
					</view>
					<view class="firm_js">
						<text>智能制造</text>
						<text>方案咨询</text>
						<text>项目集成</text>
					</view>
					<view class="firm_addr">
						<image class="maxiconSize" src="@/static/device/wxduoyingyong.png" mode=""></image>
						<view class="">
							重庆市北培区工业园
						</view>
					</view>
				</view>
				<view class="ref_hm">
					<view class="ref_line">

					</view>
					<view class="ref_item">
						<view class="">
							<image class="maxiconSize" src="@/static/device/wxduoyingyong.png" mode=""></image>
						</view>
						<view class="item_tle">
							公司首页
						</view>
						<view class="">
						</view>
					</view>
				</view>
			</view>
			<view class="dev_status">
				<view class="dev_use">
					<image class="maxiconSize" src="@/static/device/wxzhengchangshiyong.svg" mode=""></image> HY90392保养任务即将过期，请注意查看
				</view>
			</view>
		</view>
		<view class="repair_func">
			<view class="func_item" style="box-shadow: none;">
				<DevTitle oneTle="故障报修" twoTle=" "></DevTitle>
				<view class="func_list">
					<view class="list_item quick_item" style="margin-right: 24rpx;">
						<view class="rep_tle">
							<view>快速报修</view>
							<view>></view>
						</view>
						<view class="rep_js"><text>支持</text><text> 报修录音 </text><text>报修</text></view>
						<view class="rep_stu" style="">
							<image src="@/static/device/gwpeizhi-yunweipeizhi.png" mode=""></image>
							<text>扫码报修</text>
						</view>
					</view>
					<view class="list_item">
						<view class="rep_tle">
							<view>验证</view>
							<view>></view>
						</view>
						<view class="rep_js"><text>快速查看</text><text style="color:#0379FF ;"> 设备状态 </text></view>
						<view class="rep_stu" style="background:#0379FF;">
							<image src="@/static/device/gwpeizhi-yunweipeizhi.png" mode=""></image>
							<text>急速</text>
						</view>
					</view>
				</view>
			</view>

			<view class="func_item">
				<RadiusTitle  oneTle="代办任务" twoTle="流程审批" background=""></RadiusTitle>
				<view class="eng_tab">
					<view class="tab_item">
						<view class="item_img img1">
							<image src="@/static/device/daishenpi1.svg" mode=""></image>
						</view>
						<view class="item_tle">
							待审批
						</view>
					</view>
					<view class="tab_item">
						<view class="item_img img2">
							<image src="@/static/device/daichuli.svg" mode=""></image>
						</view>
						<view class="item_tle">
							待处理
						</view>
					</view>
					<view class="tab_item">
						<view class="item_img img3">
							<image src="@/static/device/yanshoushenqing.svg" mode=""></image>
						</view>
						<view class="item_tle">
							待验收
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="dev_func">
			<view class="func_item">
				<DevTitle oneTle="设备台账" twoTle="设备台账"></DevTitle>
				<view class="func_list">
					<view class="list_item" @click="navTo('/pages/device/list')">
						<view class="">
							<image src="@/static/device/wxliebiao1.svg" mode=""></image>
						</view>
						<view class="">
							设备列表
						</view>
					</view>
					<view class="list_item">
						<view class="">
							<image src="@/static/device/wxliebiao.svg" mode=""></image>
						</view>
						<view class="">
							设备盘点
						</view>
					</view>
				</view>
			</view>
			<view class="func_item">
				<DevTitle oneTle="购置管理" twoTle="设备采购管理"></DevTitle>
				<view class="func_list">
					<view class="list_item">
						<view class="">
							<image src="@/static/device/wxliebiao.svg" mode=""></image>
						</view>
						<view class="">
							采购计划
						</view>
					</view>
					<view class="list_item">
						<view class="">
							<image src="@/static/device/wxxianxinggouwudai.svg" mode=""></image>
						</view>
						<view class="">
							采购申请
						</view>
					</view>
					<view class="list_item">
						<view class="">
							<image src="@/static/device/wxyanshoutongguo.svg" mode=""></image>
						</view>
						<view class="">
							设备验收
						</view>
					</view>
				</view>
			</view>
			<view class="func_item">
				<DevTitle oneTle="设备处置" twoTle="设备管理"></DevTitle>
				<view class="func_list">
					<view class="list_item">
						<view class="">
							<image src="@/static/device/wxtiaobozhuanyi.svg" mode=""></image>
						</view>
						<view class="">
							调拨转移
						</view>
					</view>
					<view class="list_item">
						<view class="">
							<image src="@/static/device/wxshebeichuzhi.svg" mode=""></image>
						</view>
						<view class="">
							设备处置
						</view>
					</view>
					<view class="list_item">
						<view class="">
							<image src="@/static/device/wxpaimai1.svg" mode=""></image>
						</view>
						<view class="">
							设备变卖
						</view>
					</view>
					<view class="list_item" style="margin-right: 0;">
						<view class="">
							<image src="@/static/device/wxlingyongguihuan.svg" mode=""></image>
						</view>
						<view class="">
							领用归还
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import DevTitle from "@/components/dev-title/index.vue"
	import RadiusTitle from "@/components/radius-title/index.vue"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			DevTitle,
			RadiusTitle
		},
		data() {
			return {
				plantTitle: '中国科技集团公司',
				background: '#13c296'
			};
		},
		mounted() {},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@mixin minIconSize {
		width: 40rpx;
		height: 40rpx;
	}

	@mixin maxIconSize {
		width: 60rpx;
		height: 60rpx;
	}

	/deep/ .u-navbar {
		background: #13c296 !important;
		color: #FFFFFF !important;
	}

	/deep/ .u-back-wrap {

		padding: 0 30rpx 0 0 !important;
	}

	.content {
		/deep/ .u-iconfont {
			display: none !important;
		}

		background: #fff;
		position: relative;

		.con_nav {
			/deep/ .u-border-bottom:after {
				border: none;
			}
		}

		.nav_con {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			/deep/ .u-iconfont {
				display: block !important;
			}

			.nav_icon {
				margin-left: 10rpx;
			}
		}

		.devices {
			z-index: 9;
			width: 100%;
			position: fixed;
			background: $bodyColor;
			box-sizing: border-box;

			.dev_referral {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 30rpx 60rpx 30rpx;

				.ref_hm {
					display: flex;
					align-items: center;

					.ref_line {
						height: 130rpx;
						width: 2rpx;
						background: rgba($color: #ffffff, $alpha: 0.8);
						margin-right: 38rpx;
					}

					.ref_item {
						color: #FFFFFF;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 32rpx;

						image {
							@include minIconSize;
							font-size: blod;
						}

						.item_tle {
							font-size: 24rpx;
							margin: 6rpx 0;
						}
					}
				}

				.ref_firm {
					display: flex;
					flex-direction: column;
					color: #F6F8FF;

					.firm_tle {
						font-size: 38rpx;
					}

					.firm_js {
						text:nth-child(1) {
							color: #FF932F;
						}

						text:nth-child(2) {
							margin: 0 10rpx;
						}
					}

					.firm_js,
					.firm_addr {
						font-size: 24rpx;
						margin: 6rpx 0;
					}

					.firm_addr {
						display: flex;
						align-items: center;

						image {
							width: 26rpx;
							height: 26rpx;
							margin-right: 6rpx;
						}
					}
				}

			}

			.dev_status {
				width: 100%;
				position: fixed;
				margin-top: -35rpx;
				border-top-left-radius: 32rpx;
				border-top-right-radius: 32rpx;
				border-bottom: 2rpx solid #e5f8f3;
				color: $bodyColor;
				background: #ffffff;
				padding: 18rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.dev_use {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					color: #ECC960;

					image {
						@include minIconSize;
						margin-right: 20rpx;
					}
				}
			}
		}

		.repair_func {
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 20rpx;
			padding-top: 236rpx;
			.func_item {
				@include box_shadow;
				display: flex;
				flex-direction: column;
				z-index: -1;
				@include box_radius(24rpx);
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx 20rpx 50rpx 20rpx;
				margin-bottom: 30rpx;

				.func_tle {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 48rpx;

					.tle_b {
						font-size: 32rpx;
						color: #333333;
						margin-left: -10rpx;
					}

					.tle_c {
						margin-left: 12rpx;
						font-size: 24rpx;
						color: #999999;
					}

					.tle_a {
						display: flex;
						align-items: center;

						image {
							@include minIconSize;
						}
					}
				}

				.func_list {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.list_item {
						width: 50%;
						font-size: 24rpx;
						display: flex;
						flex-direction: column;
						padding: 20rpx 30rpx 30rpx 20rpx;
						box-shadow: 0px 1px 10px 0px rgba(3, 121, 255, 0.1);
						@include box_radius(20rpx);
						// background-image: url(../../static/device/y-wxweixiu.svg);
						background: url(../../static/device/duanxin.png) no-repeat;
						background-size: 120rpx;
						background-position: 170rpx 70rpx;

						.rep_tle {
							display: flex;
							font-size: 32rpx;
							color: #0F0F0F;
							font-weight: bold;
							justify-content: space-between;
							align-items: center;

							view:nth-child(2) {
								font-size: 20rpx;
								background: #0F0F0F;
								padding: 2rpx 8rpx;
								@include box_radius(50%);
								color: #FFFFFF;
								text-align: center;
								display: flex;
								align-items: center;
							}
						}

						.rep_js {
							font-size: 24rpx;
							color: #999999;
							margin: 16rpx 0;

							text:nth-child(2) {
								color: #ff932f;
								margin: 0rpx 10rpx;
							}
						}

						.rep_stu {
							margin-left: 0;
							width: auto;
							margin-right: auto;
							background: #ff932f;
							padding: 4rpx 20rpx;
							@include box_radius(20rpx);
							color: #FFFFFF;

							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 20rpx;
							}
						}
					}

					image {
						@include maxIconSize;
					}
					
					.quick_item{
						background: url(../../static/device/y-wxweixiu.png) no-repeat;
						background-size: 120rpx;
						background-position: 170rpx 70rpx;
					}
				}

				.eng_tab {
					display: flex;
					margin-top: 30rpx;
					justify-content: space-around;

					.tab_item {
						display: flex;
						flex-direction: column;
						align-items: center;

						.item_img {
							padding: 22rpx 28rpx;
							border-radius: 50%;
							margin-bottom: 10rpx;
						}

						.item_tle {
							font-size: 26rpx;
							color: #101010;
						}

						image {
							height: 50rpx;
							width: 50rpx;
							font-size: blod;
						}
						.img1{
							background: rgba($color: #0379FF, $alpha: 0.2);
						}
						.img2{
							background: rgba($color: #FFA903, $alpha: 0.2);
						}
						.img3{
							background: rgba($color: #03FF9D, $alpha: 0.2);
						}
					}
				}
			}

		}
		.dev_func{
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 20rpx;
			padding-top: 0rpx;
			.func_item{
				display: flex;
				flex-direction: column;
				z-index: -1;
				@include box_radius(24rpx)
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx 20rpx 50rpx 20rpx;
				margin-bottom: 30rpx;
				.func_tle{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 48rpx;
					.tle_b{
							font-size: 32rpx;
							color: #333333;
							margin-left: -10rpx;
					}
					.tle_c{
						margin-left: 12rpx;
						font-size: 24rpx;
						color:#999999;
					}
					.tle_a{
						display: flex;
						align-items: center;
						image{
							@include minIconSize;
						}
					}
				}
				.func_list{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding-left: 40rpx;
					.list_item{
						font-size: 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 70rpx;
					}
					image{
						@include maxIconSize;
					}
				}
			}
		}
		
	}
</style>
